<template>
 <div class="root">
<!--   <div class="canvasContainer">-->
<!--     <canvas id="renderCanvas">-->
<!--     </canvas>-->
<!--   </div>-->
   <div class="divContainer">
     <div class="top">
      <div class="toptitle">
        实时材质制作工具
      </div>
       <div class="toprender">
         <el-row>
           <el-button type="primary" @click="RenderClick">渲染</el-button>
         </el-row>
       </div>
       <div class="tophelp">
        帮助信息
       </div>
     </div>
     <div class="bottom">
       <div class="leftMatCategory">
         材质分类
       </div>
       <div class="mainMatShow">
         <canvas id="renderCanvas">
         </canvas>
       </div>
       <div class="matAttr">
         材质属性
       </div>
     </div>
   </div>
 </div>


</template>

<script>
import WebMatRenderRoot from "../core/RenderJson/WebMatRenderRoot";
import * as BABYLON from 'babylonjs';
import axios from "axios";
export default {
  name: "BabylonJsCanvas",
  data() {
    return {};
  },
  mounted() {
    var canvas = document.getElementById("renderCanvas"); // 得到canvas对象的引用
    var engine = new BABYLON.Engine(canvas, true); // 初始化 BABYLON 3D engine

    var createScene = function () {

      // 创建一个场景scene
      var scene = new BABYLON.Scene(engine);
      var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
      camera.setPosition(new BABYLON.Vector3(0, 0, -10));
      camera.attachControl(canvas, true);

      // eslint-disable-next-line no-unused-vars
      var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 2, 0), scene);

      // eslint-disable-next-line no-unused-vars
      var sphere = BABYLON.MeshBuilder.CreateSphere(
        "sphere",
        { diameter: 2 },
        scene
      );


      return scene;
    };
    var scene = createScene();
    engine.runRenderLoop(function () {
      scene.render();
    });
    window.addEventListener("resize", function () {
      engine.resize();
    });
  },
  methods:{
    RenderClick(){
      let webMatRenderRoot=new WebMatRenderRoot();
      webMatRenderRoot.RenderSceneType=0;
      var appData = require('../assets/RenderJson.json');
      console.log(appData)
      let jsonData= appData;

      // let jsonData= JSON.stringify(webMatRenderRoot);
      // console.log(jsonData);

      let renderurl='http://localhost:8080/renderapi/Render/';
      axios.post(renderurl,jsonData).then(function (resp){
          console.log("渲染成功！",resp);
        }).catch(function (ex){
          console.log(ex);
        });

     // let renderurl='renderapi/Render/';
      // this.$http.post(renderurl,jsonData).then(function (){
      //   console.log("渲染成功！");
      // }).catch(function (ex){
      //   console.log(ex);
      // });

    }
  }
};

</script>

<style scoped lang="scss">
.root
{
  position: relative;
  width: 100%;
  height: 100%;
  .canvasContainer
  {
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events:auto;
    z-index: 1;
    #renderCanvas {
      width: 100%;
      height: 100%;
      touch-action: none;
    }
  }
  .divContainer{
    text-align: center;
    vertical-align: center;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column ;
    justify-content:space-between;
    .top{
      height: 180px;
      width: 100%;
      border: 1px solid chartreuse;
      display: flex;
      flex-direction: row ;
      justify-content:space-between;
      .toptitle
      {
        width: 20%;
        border: 1px solid #2c5622;
      }
      .toprender
      {
        width: 60%;
        border: 1px solid #841d81;
      }
      .tophelp
      {
        width: 20%;
        border: 1px solid #8c432a;
      }
    }
    .bottom
    {
      height: 900px;
      width: 100%;
      border: 1px solid #ff8301;
      display: flex;
      flex-direction: row ;
      justify-content:space-between;
      .leftMatCategory
      {
        width: 20%;
        border: 1px solid #0760ff;
      }
      .mainMatShow
      {
        width: 60%;
        #renderCanvas {
          width: 100%;
          height: 100%;
          touch-action: none;
        }
      }
      .matAttr
      {
        width: 20%;
        border: 1px solid #00fefb;
      }
    }
  }
}


</style>
